<!-- 
  vue2 --- vue3，仅仅是 js 部分代码需要改变
  其他的例如 template，style几乎是的一致
 -->

<!-- 
  封装
  1. 先把业务代码完成
  2. 封装成函数 useMouseMove ，把需要用到的属性/方法等，return { mouse }
  3. 页面需要使用，就调用封装好的方法 useMouseMove()，拿到返回的数据
 -->
<script>
import { onMounted, onUnmounted, reactive, ref } from 'vue';

const useAdd = () => {
  // 计数器的代码-----开始
  const count = ref(0);
  const add = () => {
    count.value++;
  };
  // 页面需要用到的数据和方法返回出来即可
  return { count, add };
  // 计数器的代码-----结束
};

const useMouseMove = () => {
  // 鼠标移动的的代码-----开始
  const mouse = reactive({
    x: 0,
    y: 0,
  });

  const move = (e) => {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
  };
  onMounted(() => {
    document.addEventListener('mousemove', move);
  });
  onUnmounted(() => {
    document.removeEventListener('mousemove', move);
  });
  // 鼠标移动的的代码-----结束
  return { mouse };
};

export default {
  setup() {
    const { count, add } = useAdd();
    const { mouse } = useMouseMove();

    return {
      count,
      add,
      mouse,
    };
  },
};
</script>

<template>
  <div>
    当前鼠标位置:
    <div>x: {{ mouse.x }}</div>
    <div>y: {{ mouse.y }}</div>

    当前点击次数: {{ count }}
    <button @click="add">+1</button>
  </div>
</template>
